<template>
	<view class="">
		<view class="order_top">
			<view class="time">
				剩余 <span>{{countdown}}</span> 请尽快支付
			</view>
			<view class="flex1">
				<view class="">
					取餐时间：{{orderinfo.takeTimeBegin?orderinfo.takeTimeBegin.substring(0,5):''}}-{{orderinfo.takeTimeEnd?orderinfo.takeTimeEnd.substring(0,5):''}}
				</view>
				<image @click="opents" src="/static/icon/ts.png" mode=""></image>
			</view>
			<view class="address">
				<view class="" style="flex: 1;">
					<view class="">
						{{shopinfo.address}}
					</view>
					<view class="" style="color: #29A85C;">
						距离您{{shopinfo.distanceString}}
					</view>
				</view>
				<view class="right">
					<image src="/static/icon/dh.png" mode="" @click="$opennavigation(shopinfo)"></image>
					<image src="/static/icon/sj.png" mode="" @click="$phoneCall(shopinfo.shopPhone)"></image>
				</view>
			</view>
		</view>
		<view class="oredr_detail">
			<view class="tit">商品</view>
			<view class="item_cont">
				<view class="item_l">
					<image :src="orderinfo.productLogo" mode=""></image>
					<view class="item_l_text">
						<view class="">{{orderinfo.shopName}}-{{orderinfo.productName}}</view>
						<view class="">
							<span class="its" v-for="(item,index) in orderinfo.productCategory"
								:key="index">{{item}}</span>
						</view>
					</view>
				</view>
				<view class="item_r">
					<view class="" style="text-align: right;">
						共{{orderinfo.productCount}}件
					</view>
					<view class="" style="display: flex;align-items: center;">
						<view class="FINE" style="margin-right: 20rpx;">
							￥{{orderinfo.productPriceOldBegin}}-{{orderinfo.productPriceOldEnd}}
						</view>
						<view class="DINB">
							<span class="ic">￥</span>{{orderinfo.productPrice}}
						</view>
					</view>
				</view>
			</view>

			<view class="juan">
				<view class="">
					消费券
				</view>
				<view class="flex_b">
					<view class="b2" v-if="orderinfo.couponReceiveId">
						-￥{{orderinfo.couponAmount}}
					</view>
					<view class="b1" v-else>
						未使用
					</view>
				</view>
			</view>
			<view class="juan">
				<view class="">
					合计
				</view>
				<view class="DINB">
					<span class="ic">￥</span>{{orderinfo.payAmount}}
				</view>
			</view>

		</view>
		<view class="block_2">
			<view class="its">
				<view class="its_l">商品种类</view>
				<view class="its_l">{{orderinfo.productCategory}}</view>
			</view>
			<view class="its">
				<view class="its_l">订单编号</view>
				<view class="its_l flex_b">{{orderinfo.orderNumber}}<span class="btn"
						@click="$copyFun(orderinfo.orderNumber)">复制</span></view>
			</view>
			<view class="its">
				<view class="its_l">下单时间</view>
				<view class="its_l">{{orderinfo.createTime}}</view>
			</view>
		</view>

		<view class="footerbtn">
			<view class="cont">
				<view class="btn b1" @click="handleCreateOrder">
					继续支付
				</view>
				<view class="btn b2" style="margin-right: 20rpx;" @click="gorefund">
					取消订单
				</view>
			</view>
		</view>
		<clearts ref="popupts"></clearts>
		<uni-popup ref="popup" type="center">
			<view class="popup">
				<view class="tit">
					是否确认取消订单？
				</view>
				<view class="btns">
					<view class="b1 btn" @click="handleCanlel">取消订单</view>
					<view class="b2 btn" @click="close">我再想想</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		payOrderInfo,
		orderCancel,
		payOrderApi
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				orderinfo: {},
				shopinfo: {},
				id: '',
				timer: null,
				countdown: ""
			};
		},
		onUnload() {
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		onLoad(option) {
			this.id = option.id
			payOrderInfo({
				id: option.id,
				longitude: uni.getStorageSync('address').longitude,
				latitude: uni.getStorageSync('address').latitude
			}).then(res => {
				res.data.orders.productCategory = res.data.orders.productCategory.split(',')
				this.orderinfo = res.data.orders
				this.shopinfo = res.data.shop
				this.startCountdown(res.data.wait_time)
			})
		},
		methods: {
			formatCountdown(seconds) {
				// 处理参数：确保是整数且非负数
				let totalSeconds = Math.max(0, parseInt(seconds, 10) || 0);
				// 计算时分秒
				const hours = Math.floor(totalSeconds / 3600);
				totalSeconds %= 3600;
				const minutes = Math.floor(totalSeconds / 60);
				const secs = totalSeconds % 60;
				// 补零函数
				const pad = (num) => num.toString().padStart(2, '0');
				// 返回格式化字符串
				return `${pad(minutes)}:${pad(secs)}`;
			},
			startCountdown(date) {
				let seconds = date // 初始秒数
				this.timer = setInterval(() => {
					if (seconds <= 0) {
						clearInterval(this.timer);
						return;
					}
					seconds--;
					this.countdown = this.formatCountdown(seconds);
				}, 1000);
			},
			//删除订单
			handleCanlel() {
				orderCancel({
					id: this.id
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '订单已取消',
							icon: 'none'
						})
						this.$refs.popup.close()
						uni.redirectTo({
							url: `/mainpage/orderdetail?id=${this.id}`
						})
					}
				})
			},
			opents() {
				this.$refs.popupts.open()
			},
			close() {
				this.$refs.popup.close()
			},
			gorefund() {
				this.$refs.popup.open()
			},
			//立即支付点击
			handleCreateOrder() {
				let that = this
				//微信支付
				uni.showLoading({
					title: '支付中....'
				})
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						if (loginRes.errMsg == "login:ok") {
							payOrderApi({openIdCode:loginRes.code,id:that.id}).then(res => {
								if (res.code == 200) {
									let obj = res.data.pay_info.acc_resp_fields
									uni.hideLoading()
									uni.requestPayment({
										"provider": "wxpay", //固定值为"wxpay"
										appid: obj.app_id, // 应用ID（AppID）
										package: obj.package, // 固定值
										nonceStr: obj.nonce_str, // 随机字符串
										timeStamp: obj.time_stamp, // 时间戳（单位：秒）
										signType: obj.sign_type, // 签名，这里用的 MD5 签名
										paySign: obj.pay_sign,
										success: function(res) {
											console.log("支付成功", res);
											uni.redirectTo({
												url: `/mainpage/orderdetail?id=${that.id}`
											})
										},
										fail: function(err) {
											console.log('支付失败:', err);
											uni.showToast({
												icon: 'none',
												title: '支付取消'
											})
											setTimeout(() => {
												uni.switchTab({
													url: '/pages/order/order'
												})
											}, 500)
										}
									});
								}
							})
						}
					}
				});

			},
			goyes() {
				uni.navigateTo({
					url: '/mainpage/continuepay'
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #FBFBFB;
	}

	.order_top {
		width: 100%;
		padding: 20rpx 20rpx 40rpx;
		box-sizing: border-box;
		background: #fff;

		.time {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #CE7034;
			line-height: 38rpx;
			text-align: center;
			margin: 36rpx;

			span {
				font-size: 40rpx;
				margin: 0 10rpx;
			}
		}

		.flex1 {
			display: flex;
			align-items: center;
			height: 68rpx;
			background: #F3F3F3;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #000000;
			justify-content: space-between;
			padding: 0rpx 20rpx;
			box-sizing: border-box;

			image {
				width: 32rpx;
				height: 33rpx;
			}
		}

		.address {
			background: #F3F3F3;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #000000;
			padding: 15rpx 20rpx;
			box-sizing: border-box;
			margin: 20rpx auto 0rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.right {
				image {
					width: 32rpx;
					height: 33rpx;
					margin-left: 30rpx;
				}
			}
		}
	}

	.oredr_detail {
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 20rpx auto;
		padding: 22rpx 20rpx;
		box-sizing: border-box;

		.tit {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
		}

		.item_cont {
			display: flex;
			justify-content: space-between;
			margin: 40rpx auto;

			.item_l {
				display: flex;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 10rpx;
				}

				.item_l_text {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #000000;
					margin-left: 16rpx;
					height: 100rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					span {
						height: 44rpx;
						background: #F6F6F6;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						padding: 0rpx 10rpx;
						font-weight: 500;
						font-size: 24rpx;
						color: #7B7B7B;
						line-height: 44rpx;
						text-align: center;
						margin-right: 10rpx;

					}
				}
			}

			.item_r {
				height: 100rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;

			}
		}

		.juan {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
			margin-bottom: 32rpx;

			.flex_b {
				.b1 {
					font-weight: 500;
					font-size: 28rpx;
					color: #D1CDCD;
				}

				.b2 {
					font-family: 'DINB';
					font-size: 28rpx;
					color: #FFFFFF;
					height: 32rpx;
					background: #29A85C;
					line-height: 32rpx;
					text-align: center;
					padding: 0rpx 6rpx;
				}
			}
		}


	}

	.block_2 {
		margin-top: 20rpx;
		background: #fff;
		padding: 22rpx 20rpx;
		box-sizing: border-box;

		.its {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 30rpx auto;

			.its_l {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
			}

			.price1 {
				font-family: 'DINB';
				font-size: 28rpx;
				color: #000000;

				.s1 {
					font-family: 'FINE';
				}

				span {
					font-weight: 400;
					font-size: 24rpx;
					color: #D1CDCD;
					text-decoration: line-through;
					margin-right: 6rpx;
				}
			}

			.price2 {
				font-family: 'DINB';
				font-size: 28rpx;
				color: #CE7034;
			}

			.price3 {
				font-family: 'DINB';
				font-size: 40rpx;
				color: #000000;

				span {
					font-size: 28rpx;
				}
			}

			.btn {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #FFFFFF;
				height: 32rpx;
				background: #29A85C;
				text-align: center;
				line-height: 32rpx;
				padding: 0rpx 10rpx;
				margin-left: 10rpx;
			}
		}
	}

	.footerbtn {
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		border-top: 1px solid #eee;
		position: fixed;
		bottom: 0%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.cont {
			display: flex;
			padding: 10rpx 20rpx;
			height: 120rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			align-items: center;
			flex-direction: row-reverse;

			.btn {
				width: 240rpx;
				height: 92rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				line-height: 92rpx;
				text-align: center;
			}

			.b1 {
				background: #000000;
				color: #fff;
			}

			.b2 {
				color: #D9D9D9;
				border: 2rpx solid #D9D9D9;
			}
		}
	}

	.popup {
		width: 630rpx;
		height: 330rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 80rpx 54rpx 54rpx;
		box-sizing: border-box;

		.tit {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
			text-align: center;
		}

		.btns {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 50rpx;

			.btn {
				width: 240rpx;
				height: 92rpx;
				background: #FFFFFF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				text-align: center;
				line-height: 92rpx;
			}

			.b1 {
				color: #D9D9D9;
				border: 2rpx solid #D9D9D9;
			}

			.b2 {
				color: #ffffff;
				background: #000000;
			}
		}
	}
</style>